﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	ImageZoom
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="JsCss" runat="server">
	<script src="../../Scripts/CJL.0.1.min.js"></script>
<script src="../../Scripts/ImageZoom.js"></script>
<script>

    ImageZoom._MODE = {
        //跟随
        "follow": {
            methods: {
                init: function () {
                    this._stylesFollow = null; //备份样式
                    this._repairFollowLeft = 0; //修正坐标left
                    this._repairFollowTop = 0; //修正坐标top
                },
                load: function () {
                    var viewer = this._viewer, style = viewer.style, styles;
                    this._stylesFollow = {
                        left: style.left, top: style.top, position: style.position
                    };
                    viewer.style.position = "absolute";
                    //获取修正参数
                    if (!viewer.offsetWidth) {//隐藏
                        styles = { display: style.display, visibility: style.visibility };
                        $$D.setStyle(viewer, { display: "block", visibility: "hidden" });
                    }
                    //修正中心位置
                    this._repairFollowLeft = viewer.offsetWidth / 2;
                    this._repairFollowTop = viewer.offsetHeight / 2;
                    //修正offsetParent位置
                    if (!/BODY|HTML/.test(viewer.offsetParent.nodeName)) {
                        var parent = viewer.offsetParent, rect = $$D.rect(parent);
                        this._repairFollowLeft += rect.left + parent.clientLeft;
                        this._repairFollowTop += rect.top + parent.clientTop;
                    }
                    if (styles) { $$D.setStyle(viewer, styles); }
                },
                repair: function (e, pos) {
                    var zoom = this._zoom,
					viewerWidth = this._viewerWidth,
					viewerHeight = this._viewerHeight;
                    pos.left = (viewerWidth / 2 - pos.left) * (viewerWidth / zoom.width - 1);
                    pos.top = (viewerHeight / 2 - pos.top) * (viewerHeight / zoom.height - 1);
                },
                move: function (e) {
                    var style = this._viewer.style;
                    style.left = e.pageX - this._repairFollowLeft + "px";
                    style.top = e.pageY - this._repairFollowTop + "px";
                },
                dispose: function () {
                    $$D.setStyle(this._viewer, this._stylesFollow);
                }
            }
        },
        //拖柄
        "handle": {
            options: {//默认值
                handle: ""//拖柄对象
            },
            methods: {
                init: function () {
                    var handle = $$(this.options.handle);
                    if (!handle) {//没有定义的话用复制显示框代替
                        var body = document.body;
                        handle = body.insertBefore(this._viewer.cloneNode(false), body.childNodes[0]);
                        handle.id = "";
                        handle["_createbyhandle"] = true; //生成标识用于移除
                    } else {
                        var style = handle.style;
                        this._stylesHandle = {
                            left: style.left, top: style.top, position: style.position,
                            display: style.display, visibility: style.visibility,
                            padding: style.padding, margin: style.margin,
                            width: style.width, height: style.height
                        };
                    }
                    $$D.setStyle(handle, { padding: 0, margin: 0, display: "none" });

                    this._handle = handle;
                    this._repairHandleLeft = 0; //修正坐标left
                    this._repairHandleTop = 0; //修正坐标top
                },
                load: function () {
                    var handle = this._handle, rect = this._rect;
                    $$D.setStyle(handle, {
                        position: "absolute",
                        width: this._rangeWidth + "px",
                        height: this._rangeHeight + "px",
                        display: "block",
                        visibility: "hidden"
                    });
                    //获取修正参数
                    this._repairHandleLeft = rect.left + this._repairLeft - handle.clientLeft;
                    this._repairHandleTop = rect.top + this._repairTop - handle.clientTop;
                    //修正offsetParent位置
                    if (!/BODY|HTML/.test(handle.offsetParent.nodeName)) {
                        var parent = handle.offsetParent, rect = $$D.rect(parent);
                        this._repairHandleLeft -= rect.left + parent.clientLeft;
                        this._repairHandleTop -= rect.top + parent.clientTop;
                    }
                    //隐藏
                    $$D.setStyle(handle, { display: "none", visibility: "visible" });
                },
                start: function () {
                    this._handle.style.display = "block";
                },
                move: function (e, x, y) {
                    var style = this._handle.style, scale = this._scale;
                    style.left = Math.ceil(this._repairHandleLeft - x / scale) + "px";
                    style.top = Math.ceil(this._repairHandleTop - y / scale) + "px";
                },
                end: function () {
                    this._handle.style.display = "none";
                },
                dispose: function () {
                    if ("_createbyhandle" in this._handle) {
                        document.body.removeChild(this._handle);
                    } else {
                        $$D.setStyle(this._handle, this._stylesHandle);
                    }
                    this._handle = null;
                }
            }
        },
        //切割
        "cropper": {
            options: {//默认值
                opacity: .5//透明度
            },
            methods: {
                init: function () {
                    var body = document.body,
					cropper = body.insertBefore(document.createElement("img"), body.childNodes[0]);
                    cropper.style.display = "none";

                    this._cropper = cropper;
                    this.opacity = this.options.opacity;
                },
                load: function () {
                    var cropper = this._cropper, image = this._image, rect = this._rect;
                    cropper.src = image.src;
                    cropper.width = image.width;
                    cropper.height = image.height;
                    $$D.setStyle(cropper, {
                        position: "absolute",
                        left: rect.left + this._repairLeft + "px",
                        top: rect.top + this._repairTop + "px"
                    });
                },
                start: function () {
                    this._cropper.style.display = "block";
                    $$D.setStyle(this._image, "opacity", this.opacity);
                },
                move: function (e, x, y) {
                    var w = this._rangeWidth, h = this._rangeHeight, scale = this._scale;
                    x = Math.ceil(-x / scale); y = Math.ceil(-y / scale);
                    this._cropper.style.clip = "rect(" + y + "px " + (x + w) + "px " + (y + h) + "px " + x + "px)";
                },
                end: function () {
                    $$D.setStyle(this._image, "opacity", 1);
                    this._cropper.style.display = "none";
                },
                dispose: function () {
                    $$D.setStyle(this._image, "opacity", 1);
                    document.body.removeChild(this._cropper);
                    this._cropper = null;
                }
            }
        }
    }

    ImageZoom.prototype._initialize = (function () {
        var init = ImageZoom.prototype._initialize,
		mode = ImageZoom._MODE,
		modes = {
		    "follow": [mode.follow],
		    "handle": [mode.handle],
		    "cropper": [mode.cropper],
		    "handle-cropper": [mode.handle, mode.cropper]
		};
        return function () {
            var options = arguments[2];
            if (options && options.mode && modes[options.mode]) {
                $$A.forEach(modes[options.mode], function (mode) {
                    //扩展options
                    $$.extend(options, mode.options, false);
                    //扩展钩子
                    $$A.forEach(mode.methods, function (method, name) {
                        $$CE.addEvent(this, name, method);
                    }, this);
                }, this);
            }
            init.apply(this, arguments);
        }
    })();

</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<style>.target{ color:Red;}</style>
<h2 class="target">Jquery</h2>
<div>
<script language="javascript">
    $(document).ready(function () {
        $("#btn_ajax").toggle(
        function () {
            var htmlObj = $.ajax({ url: "../../Content/ajax.txt", async: false });
            $("#myDiv").html(htmlObj.responseText);
        },
        function () {
            $.ajax({
                type: 'POST',
                url: '<%=Url.Action("JsonAjax")%>',
                data: '',
                success: function (ret) { $("#myDiv").html(ret.error_message); } //ret = jQuery.parseJSON(ret); var myhtml = ''; $(ret).each(function (i, el) { myhtml += el.error_message; }); $("#myDiv").html(myhtml); }
            })
        })
    }); 
</script>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" id="btn_ajax">Ajax</button>
</div>

<h2 class="target">ImageZoom</h2>
<div style="padding:100px">
<style>

.container{ position:relative;}

.izImage, .izViewer{border:1px solid #000;background:#fff url('o_loading.gif') no-repeat center;}
.izImage{width:300px;}
.izViewer{width:200px;height:200px;position:absolute;left:320px;top:0;display:none;}

</style>
模式选择：<br>
<input name="izMode" type="radio" value="simple" checked>
一般模式
<input name="izMode" type="radio" value="follow">
跟随模式
<input name="izMode" type="radio" value="handle">
手柄模式
<input name="izMode" type="radio" value="cropper">
切割模式
<input name="izMode" type="radio" value="handle-cropper">
手柄切割模式 <br>
<br>
<div class="container"> <img id="idImage" class="izImage" src="../../Content/o_mm_small.jpg" />
	<div id="idViewer" class="izViewer"></div>
</div>
<div id="idHandle" style="display:none;opacity:0.5;filter:alpha(opacity=50);background:#fff;"></div>
<div id="idHandle2" style="display:none;border:1px solid #000;"></div>
<script>

    var options = { scale: 5, zoomPic: "../../Content/o_mm_big.jpg" },
	iz = new ImageZoom("idImage", "idViewer", options);

    $$A.forEach(document.getElementsByName("izMode"), function (elem) {
        elem.onclick = function () {
            iz.dispose();
            iz = new ImageZoom("idImage", "idViewer", $$.extend(options, {
                mode: this.value,
                handle: this.value == "handle" ? "idHandle" : "idHandle2"
            }));
        }
    });

</script>
<br>
仿凡客诚品(vancl)商品图片放大效果
<style>
.list{ padding-right:10px;}
.list img{ cursor:pointer; padding:1px; border:1px solid #cdcdcd; margin-bottom:10px; display:block;}
.list img.onzoom, .list img.on{padding:0px; border:2px solid #336699;}

.izImage2{border:0;width:400px;}
.izViewer2{width:360px;height:300px;position:absolute;left:420px;top:0;display:none; border:1px solid #999;}

.handle2{display:none;opacity:0.6;filter:alpha(opacity=60);background:#E6EAF3; cursor:crosshair;}

</style>
<table>
	<tr>
		<td valign="top"><div id="idList" class="list"> </div></td>
		<td><div class="container"> <img id="idImage2" class="izImage2" />
				<div id="idViewer2" class="izViewer2"></div>
			</div></td>
	</tr>
</table>
<div id="idHandle3" class="handle2"></div>
<script>

    (function () {

        var iz = new ImageZoom("idImage2", "idViewer2", {
            mode: "handle", handle: "idHandle3", scale: 2, delay: 0
        });

        var arrPic = [], list = $$("idList"), image = $$("idImage2");

        arrPic.push({ smallPic: "../../Content/o_s_1.jpg", originPic: "../../Content/o_m_1.jpg", zoomPic: "o_b_1.jpg" });
        arrPic.push({ smallPic: "o_s_2.jpg", originPic: "../../Content/o_m_2.jpg", zoomPic: "o_b_2.jpg" });

        $$A.forEach(arrPic, function (o, i) {
            var img = list.appendChild(document.createElement("img"));
            img.src = o.smallPic;
            img.onclick = function () {
                iz.reset({ originPic: o.originPic, zoomPic: o.zoomPic });
                $$A.forEach(list.getElementsByTagName("img"), function (img) { img.className = ""; });
                img.className = "onzoom";
            }

            var temp;
            img.onmouseover = function () { if (!this.className) { this.className = "on"; temp = image.src; image.src = o.originPic; } }
            img.onmouseout = function () { if (this.className == "on") { this.className = ""; image.src = temp; } }

            if (!i) { img.onclick(); }
        })


    })()

</script>

</div>

</asp:Content>
